<template>
        <div class="zhezhao">
                <!-- 联系我们 -->
                <div 
                   @click="showPopup"
                   class="Popup"
                   id="drag"
                   @touchstart="down"
                   @touchmove="move"
                   @touchend="end"
                 >
                     <van-icon name="envelop-o" class="icon" />
                </div>


                <van-popup v-model="show" class="content">
                        <div class="header">
                                <span>给我们留言</span>
                                <span class="close" @click="close">关闭</span>
                        </div>
                        <p>您好，很抱歉,我们暂时无法为您提供服务,如需帮助，请留言，我们尽快解决你的问题。</p>
                        <van-field v-model="tel" label="手机:" placeholder="请输入" />
                        <van-field v-model="text" type="text" label="留言内容:" placeholder="请输入" />
                        <van-button type="info" class="btn">提交</van-button>
                </van-popup>

        </div>
</template>

<script>
        import { Button } from 'vant';
        import { Popup } from 'vant';
        import { Field } from 'vant';
        import { Icon } from 'vant';
        export default {
                name: 'Zhezhao',
                components: {
                        [Button.name]: Button,
                        [Popup.name]: Popup,
                        [Field.name]: Field,
                        [Icon.name]: Icon,
                },
                data() {
                        return {
                                show: false,
                                tel: '',
                                text: '',

                                 flags:false,//拖拽状态
                                position:{x:0,y:0},//位置
                                maxw:0,//最大左右
                                maxh:0,//上下距离
                                mouseX:"",//鼠标x坐标
                                mouseY:"",//鼠标y坐标
                                elementX:"",//移动的X,
                                elementY:"",//移动的Y
                        }
                },
                mounted() {
                        //获取屏幕最大的宽高；
                        this.maxw=document.body.clientWidth;
                        this.maxh=document.documentElement.clientHeight;
                  
                },
                methods: {
                        showPopup() {
                                this.show = true//点击后显示页面
                        },
                        close() {
                                this.show = false
                        },
                        down(event){
                           this.flags=true;//开启拖拽
                           var touch 
                           if(event.touches){
                              touch=event.touches[0]
                           }else{
                                   touch=event;
                           }
                           //获取鼠标Xy的坐标
                           this.mouseX=touch.clientX;
                           this.mouseY=touch.clientY;
                        },
                        //拖拽状态下
                        move(event){
                           event.preventDefault();//阻止一起滑动；
                           if(this.flags){
                                var touch;
                                if(event.touches){
                                   touch=event.touches[0]
                                }else{
                                    touch=event;    
                                }
                                //获取移动的XY的距离
                                this.elementX=touch.clientX-this.position.x;
                                this.elementY=touch.clientY-this.position.y;
                           }
                         //判断移动左右的范围
                         if(this.elementX<0){//在最边上
                                 this.elementX=0;
                         }else if(this.elementX>this.maxw-touch.target.clientWidth){//移动的距离和屏幕最大宽度对比
                                 this.elementX=this.maxw-touch.target.clientWidth//盒子自身的宽度
                         }
                         //判断移动的上下的范围
                         if(this.elementY<0){
                                 this.elementY=0
                         }else if(this.elementY>this.maxh-touch.target.clientHeight){
                                 this.elementY=this.maxh-touch.target.clientHeight
                         }



                         //移动当前元素的距离
                         drag.style.left=this.elementX+"px";
                         drag.style.top=this.elementY+"px";

                        },
                        end(){
                                this.flags=false;
                        }


                }
        }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
        .Popup {
                text-align: center;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                line-height: 50px;
                background: #007aff;
                position: fixed;
                z-index: 1000;
                bottom: 60px;
                right: 10px;
                overflow: hidden;
                color: white;
        }

        .icon {
                font-size: 30px;
                line-height: 50px;
                width: 100%;
        }

        .content {
                text-align: center;
                width: 100%;
                height: 680px;
                background: #EEEEEE;
        }

        .header {
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: #007aff;
                color: white;
        }

        .close {
                margin-left: 290px;
        }

        .btn {
                width: 90%;
                margin-top: 10px;

        }
</style>